class Load {
  constructor() {
    /**
     * @type {Record<string, HTMLElement>}
     */
    this.dom = {
      wushi: $('.load .wushi')
    }
    this.enter()
  }
  
  async enter() {
    const { wushi } = this.dom
    await animate(3000, 0, 100, (val) => {
      wushi.style.left = `${val}%`
    })
    page.next()
  }
}

class P1 {
  constructor() {
    /**
     * @type {Record<string, HTMLElement>}
     */
    this.dom = {
      btn: $('.p1 .btn')
    }
    this.enter()
    this.bind()
  }
  
  enter() {
    const { btn } = this.dom
    btn.classList.add('transform-animate')
  }
  
  bind() {
    const { btn } = this.dom
    btn.on('click', () => void page.next())
  }
}

class P2 {
  constructor() {
    /**
     * @type {Record<string, HTMLElement>}
     */
    this.dom = {
      btn: $('.p2 .btn'),
      text: $('.p2 .text')
    }
    this.enter()
    this.bind()
  }
  
  bind() {
    const { btn } = this.dom
    btn.onclick = this.next.bind(this)
  }
  
  next() {
    page.next()
    this.reset()
  }
  
  async enter() {
    const { btn } = this.dom
    await this.showText()
    btn.classList.add('transform-animate')
  }
  
  async showText() {
    const { text } = this.dom
    await text.children[0].fadeIn(1000)
    await text.children[1].fadeIn(1000)
    await text.children[2].fadeIn(1000)
  }
  
  reset() {
    const { btn, text } = this.dom
    btn.classList.remove('transform-animate');
    [...text.children].forEach(i => i.hide())
  }
}

class P3 {
  constructor() {
    this.result = ''
    this.currDom = null
    this.data = {
      subject: [{
        title: '充耳不闻无话讲',
        info: '打一茶名',
        options: { A: '龙井',B: '碧螺春',C: '佛手',D: '铁观音' },
        result: 'A'
      }, {
        title: '充耳不闻无话讲',
        info: '打一茶名',
        options: { A: '龙井',B: '碧螺春',C: '佛手',D: '铁观音' },
        result: 'A'
      }, {
        title: '山水相连称第一',
        info: '打一茶名',
        options: { A: '深圳',B: '广州',C: '佛山',D: '汕头' },
        result: 'C'
      }, {
        title: '山水相连称第一',
        info: '打一茶名',
        options: { A: '深圳',B: '广州',C: '佛山',D: '汕头' },
        result: 'C'
      }, {
        title: '山水相连称第一',
        info: '打一茶名',
        options: { A: '深圳',B: '广州',C: '佛山',D: '汕头' },
        result: 'C'
      }, {
        title: '山水相连称第一',
        info: '打一茶名',
        options: { A: '深圳',B: '广州',C: '佛山',D: '汕头' },
        result: 'C'
      }]
    }
    /**
     * @type {Record<string, HTMLElement>}
     */
    this.dom = {
      items: $all('.p3 .list .item'),
      modal: $('.p3 .modal'),
      text: $('.p3 .text'),
      options: $('.p3 .text'),
      submit: $('.p3 .submit'),
      tip: $('.p3 .content .tip'),
      btn: $('.p3 .btn'),
      card: $('.p3 .card')
    }
    this.bind()
  }
  
  bind() {
    const { items, options, submit, btn, card } = this.dom
    items.forEach((item, i) => {
      item.onclick = this.showModal.bind(this, item, i)
    })
    options.ontouchstart = this.select.bind(this)
    submit.onclick = this.submit.bind(this)
    btn.onclick = this.showCard.bind(this)
    card.onclick = this.goHome.bind(this)
  }
  
  showModal(item, index) {
    const { modal, text } = this.dom
    const { subject } = this.data
    modal.fadeIn()
    const sub = subject[index]
    let html = `
      <div class="title">${sub.title}</div>
      <div class="info">(${sub.info})</div>
      <div class="options l-center">`
    for (let k in sub.options) {
      html += `<span data-op="${k}">${k}: ${sub.options[k]}</span>`
    }
      `</div>
    `
      text.innerHTML = html
      this.result = sub.result
      this.currDom = item
  }
  
  showCard() {
    const { card } = this.dom
    card.fadeIn()
  }
  
  hideModal() {
    const { modal } = this.dom
    modal.fadeOut()
  }
  
  select(e) {
    const target = e.target
    if (target.nodeName === 'SPAN') {
      [...target.parentElement.children].forEach(item => void (item.className = ''))
      target.onclick = () => {
        target.classList.add('active')
      }
    }
  }
  
  async submit() {
    const select = $('.p3 .options span.active')
    if (!select) return this.showTip('请选择你的回答!')
    const answer = select.dataset.op
    if (answer === this.result) {
      await this.showTip('您的回答正确!')
      this.hideModal()
      this.isEnd()
    } else {
      this.showTip('您的回答错误!')
    }
  }
  
  showTip(text) {
    return new Promise(resolve => {
      const { tip } = this.dom
      tip.innerText = text
      tip.fadeIn()
      setTimeout(async () => {
        await tip.fadeOut()
        resolve()
      }, 1000)
    })
  }
  
  isEnd() {
    const { btn } = this.dom
    this.currDom.src = './img/p3/denglong-active.png'
    this.currDom.classList.add('active')
    const count = $all('.p3 .item').length
    const c = $all('.p3 .item.active').length
    if (c >= count) {
      btn.classList.add('transform-animate')
    }
  }
  
  goHome() {
    page.goHome()
    this.reset()
  }
  
  reset() {
    const { card, btn, items } = this.dom
    card.hide()
    btn.classList.remove('transform-animate')
    items.forEach((item, i) => {
      if (i < 2) {
        item.src = './img/p3/denglong1.png'
      } else {
        item.src = './img/p3/denglong2.png'
      }
      item.classList.remove('active')
    })
  }
}

class Page {
  constructor() {
    this.oldPage = -1
    this.page = 0
    /**
     * @type {Record<string, HTMLElement>}
     */
    this.dom = {
      pages: $all('.page')
    }
    this.renderPage()
    new Load()
  }

  renderPage() {
    const { pages } = this.dom
    pages.forEach((item, i) => {
      if (i === 0) item.show()
      item.style.zIndex = pages.length - i
    })
  }

  async changePage() {
    const { pages } = this.dom
    pages[this.oldPage].fadeOut()
    await pages[this.page].fadeIn()
    this.checkPage()
  }
  
  next() {
    this.oldPage = this.page
    this.page++
    this.changePage()
  }

  checkPage() {
    const { page } = this
    if (page === 1) new P1()
    if (page === 2) new P2()
    if (page === 3) new P3()
  }
  
  goHome() {
    this.oldPage = this.page
    this.page = 1
    this.changePage()
  }
}

const page = new Page()
